<template>
    <div>
        
        <!-- 通过ref来获取ref标签实例值，vue2是使用refs.ref属性值，而现在就只是使用let op = ref() -->
    <p ref = 'op' > 这是p元素</p>
        
    <span ref="pq">  这是span 标签</span>
    </div>
</template>

<script lang='ts' setup>
import { ref,onMounted,nextTick } from "vue"
    
let op = ref()   // 获取ref属性值为op的标签
console.log(op);

//这里现在是获取不到值的，那是因为现在的触发时机相当于是created阶段，而这里获取的是挂载后的元素，所以这里的值为undefined
//我们如果要获取值的话，我们就一定要在onMounrted里面获取或者在nextTick里面获取
console.log(op.value);

onMounted(()=>{
    console.log(op.value);
    
}),
nextTick(()=>{
    //这里的效果其实和上面的onMounted是一样的，这是在dom更新循环后执行  ，与updated的区别就是  它只会执行一次，updated每次更新都会执行
    console.log(op.value);
})

let pq = ref()
nextTick(()=>{
    console.log(pq.value);
    
})
</script>
 
<style lang = "less" scoped>
    
</style>